<template>
	<view class="page-wrap">
		<view>
			<view class="topbar">
				<image class="logo" src="/static/logo.png"></image>
			</view>
		</view>
		<uni-list class="main-wrap" :border="true">
			<uni-collapse>
				<uni-collapse-item v-for="(item, index) in displayBills" :key="index" :title="item.title + '    ' + item.time">
					<template v-slot:title>
						<view class="bill-title">
							<text class="bill-title-amount">{{ item.title }}</text>
							<text class="bill-title-time">{{ item.time }}</text>
						</view>
					</template>
					<view class="bill-content">
						<view class="bill-content-item">
							<text class="bill-content-item-name">商品</text>
							<text class="bill-content-item-other">数量</text>
							<text class="bill-content-item-other">单价</text>
							<text class="bill-content-item-other">金额</text>							
						</view>
						<view class="bill-content-item" v-for="(b, bindex) in item.buys" :key="bindex">
							<text class="bill-content-item-name">{{ b.name }}</text>
							<text class="bill-content-item-other">{{ b.cnt }}</text>
							<text class="bill-content-item-other">{{ '￥' + b.price }}</text>
							<text class="bill-content-item-other">{{ '￥' + b.price * b.cnt }}</text>
						</view>
						<button class="popup-editor-button" @click="onClickDel(item.bill)">删除</button>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-list>
		<view class="footbar">
			<text>{{ `订单总数：${displayBills.length}` }}</text>
			<view class="bill">
				<uni-icons type="wallet-filled" size="44"></uni-icons>
				<text>{{ `￥${totalAmount}` }}</text>
			</view>
		</view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import moment from 'moment';

interface IDisplayBill {
	bill: engine.BillInfo
	title: string
	time: string
	buys: engine.BuyInfo[]
}

const bills = engine.dataMgr.bills;
const displayBills = computed(() => {
	const out: IDisplayBill[] = [];
	for (const b of bills.value) {
		out.push({
			bill: b,
			title: '￥' + b.totalAmount,
			time: moment(b.time).format('YYYY-MM-DD HH:mm:ss'),
			buys: b.buys
		});
	}
	return out;
});

const totalAmount = engine.dataMgr.totalBillAmount;

const onClickDel = (bill: engine.BillInfo) => {
	for (let i = 0, len = bills.value.length; i < len; i++) {
		const b = bills.value[i];
		if (b.time == bill.time) {
			bills.value.splice(i, 1);
			break;
		}
	}
};
</script>

<style lang="scss">

.toolbar {
	@include flex;
	height: $toolbar-height;
	padding-left: 20px;
	padding-right: 20px;
	justify-content: right;
}

.toolbar-right-icon {
	margin-left: 20px;
}

.main-wrap {
	height: calc(100vh - $topbar-height - $toolbar-height);
	overflow: scroll;
}

.bill-title {
	@include flex;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;
	height: 40px;
}

.bill-title-amount {
	font-size: 20px;
	font-weight: bold;
	width: 30%;
}

.bill-content {
	@include flex-v;
	padding: 10px 20px 10px 20px;
}

.bill-content-item {
	@include flex;
	height: 32px;
	line-height: 32px
}

.bill-content-header {
	@extend .bill-content-item;
	border-bottom: 2px dotted gray;
}

.bill-content-item-name {
	flex: 55%;
}

.bill-content-item-other {
	flex: 15%;
}

</style>